<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鲜花列表</title>
		 <link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
		 <script src="../res/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript" src="../res/js/Tools.js"></script>
		 <script src="../res/layui/layui.js" charset="utf-8"></script>
		<script>
			//全局同步
			$.ajaxSetup({
				async : false
			});
		</script>
	</head>
	<body>
	<div class="layui-col-md10">
		     <form style="margin-top: 20px; " class="layui-form" id="formId" lay-filter="example" enctype="multipart/form-data">
				 <!--隐藏字段id,区分添加和修改-->
				 <input type="hidden" name="fId" id="fId"/>
						<div class="layui-form-item">
						 <div class="layui-inline">
						   <label class="layui-form-label">鲜花名称</label>
						   <div class="layui-inline">
						      <input type="text" name="fName" style="width: 280px;"  lay-verify="required"  Maxlength="50"  id="fName " lay-verify="title" autocomplete="off" placeholder="请输入鲜花名称" class="layui-input">
						   </div>
						 </div>
						 <div class="layui-inline">
						   <label class="layui-form-label">鲜花类别</label>
						   <div class="layui-input-inline" id="flowertype" name="flowertype"></div>
						 </div>
						 <div class="layui-inline">
						   <label class="layui-form-label">价格</label>
						   <div class="layui-inline">
						      <input type="text" name="fMoney" style="width: 280px;"  lay-verify="required"  Maxlength="50"  id="fMoney " lay-verify="title" autocomplete="off" placeholder="请输入价格" class="layui-input">
						   </div>
						 </div>
							<!--<div class="layui-inline">
								<label class="layui-form-label">生产日期</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="fDate" autocomplete="off"  lay-verify="required"  placeholder="yyyy-MM-dd">
								</div>
							</div>-->
						 <div class="layui-inline">
						   <label class="layui-form-label">数目</label>
						   <div class="layui-inline">
						      <input type="text" name="number" style="width: 280px;"  lay-verify="required"  Maxlength="50"  id="number" lay-verify="title" autocomplete="off" placeholder="请输入数目" class="layui-input">
						   </div>
						 </div>
						 <div class="layui-inline">
						   <label class="layui-form-label">附件</label>
						   <div class="layui-input-inline">
						      <input type="file" name="fileone" style="display:none"  id="fileone"  autocomplete="off" class="layui-input">
							  <button id="btnone"  type="button" class="layui-btn layui-btn-normal">上传图片</button>
							  <div id="tsoneone"  target="_blank" style="text-decoration:none"></div>
						   </div>
						 </div>
						 <div class="layui-form-item" style="margin-top:40px" id="check">
						   <div class="layui-input-block">
						       <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="formDemo" >立即提交</button>
						       <button class="layui-btn layui-btn-primary" id="closeOne">关闭窗口</button>
						   </div>
						 </div>
						</div>
		       </form>
	    </div>
       <script >
		 var table2;
		layui.use(['table','layer','form','jquery'],function() {
			//获取table数据保存在变量中
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			//var laydate = layui.laydate;
			var $ = layui.$;
			var index;
			/*laydate.render({
				elem: '#fDate', //指定元素
				format:'yyyy-MM-dd',
				istime: true,
				value: new Date()
			});*/
			$.ajax({
				url: '../flowertype/findAll2',
				type: 'post',
				contentType:'application/json',
				success: function (data) {
					var arr = data.data;
					var selecthtml = " <select id='ftId' name='ftId' lay-verify='required' lay-search=''>";
					selecthtml += '<option value="" >请选择</option>';
					$.each(arr,function (index, value) {
						selecthtml += '<option value="' + [index+1]+ '">' + arr[index].ftName + '</option>';
					});
					selecthtml += "</select>"
					$('#flowertype').html(selecthtml);
					//重新渲染（非常重要）
					form.render();
				}
			});
			//提交表单
			form.on('submit(formDemo)', function () {
				//var formData = new FormData(document.getElementById("formId"));
				var fd = new FormData();
				var formData = new FormData($("#formId")[0]);
				$.ajax({
					cache : true,
					url: '../flower/addOrupdate',
					type: 'post',
					async : false,
					data:formData,
					contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
					processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
					success: function (index) {
						//layer.close(index);//关闭弹出层
						var addIndex = parent.layer.getFrameIndex(window.name);
						window.parent.layer.close(addIndex);
						window.parent.table2.reload('tableReload');//数据表格重载
					}
				});
				return false;
			});
			var id = getQueryString("id");
			if (id) {
				findById();
			}
			//关闭添加产品页面
			$("#closeOne").click(function () {
				var addIndex = parent.layer.getFrameIndex(window.name);
				window.parent.layer.close(addIndex);
				$('#ftName').val('');
				$('#fMoney').val('');
				$('#number').val('');
				$('#fDate').html('');
				$('#ftId').html('');
				$('#tsoneone').html('');
				return false;
			});

			var id = getQueryString("id");
			if (id) {
				findById();
			}
			//修改页面的赋值
			function findById(){
				var id=getQueryString("id");
				var url="../flower/findById";
				var data={fId:id};
				$.post(url,data,function(obj){
					/*$("#fId").val(obj.fId);
					$("#fName").val(obj.fName);
					$("#ftName").val(obj.ftName);
					$("#fMoney").val(obj.fMoney);
					$("#number").val(obj.number);
					$("#fileone").val(obj.fileone);*/
					//$("#ftId").val(obj.ftId);
					form.val('example',obj);

				},"json");

			}
			//附件
			$("#btnone").click(function () {
				var _fliename;
				$("#fileone").click();
				$("#fileone").change(function (obj) {
					var fileInput = $('#fileone').get(0).files[0];//获取文件名
					console.log(fileInput)
					if (fileInput != null) {
						if (fileInput.name.length >= 10) {//如果文件长度大于10就截取0到3
							var str = fileInput.name;
							_fileName = str.substring(str.lastIndexOf(".") + 1).toLowerCase();
							if (_fileName !== "jpg" && _fileName !== "png") {
								layer.msg("不支持上传该类文件");
							} else {                                           //取后缀名
								$("#tsoneone").html(str.substring(0, 4) + "..." + str.match(/\.([^\.]+)$/)[1]);
							}
						}
					}
				});
			});

		});


	</script>
</body>

</html>
